<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
	
<link rel="shortcut icon" href="${basePath}/resources/favicon.ico" />

<title>Sketchpad</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Styles -->
<c:if test="${mode eq 'app'}">
	<link href="${basePath}/resources/libs/jquery-ui/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
	<link href="${basePath}/resources/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="${basePath}/resources/libs/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
	<link href="${basePath}/resources/libs/bootstrap/css/font-awesome.min.css" rel="stylesheet">
	<link href="${basePath}/resources/css/sketchpad.css" rel="stylesheet">
	<link href="${basePath}/resources/css/tasks/tasks.css" rel="stylesheet">
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="libs/jquery-ui/css/jquery.ui.1.8.16.ie.css"/>
<![endif]-->
</c:if>

<c:if test="${mode eq 'couple'}">
	<style> 
		#start_message, #editor, #tools, #workareas-sidebar, #delete-zone, #groups-tasks-sidebar
		 { display: none; } 
	</style>
</c:if>

<c:if test="${user.type eq 'tv'}">
	<style> 
		#tools, #workareas-sidebar, #delete-zone, #groups-tasks-sidebar
		 { display: none; } 
	</style>
</c:if>


</head>

<body>

	<c:if test="${mode eq 'couple'}">
		<div>
			<img id="import-loading-icon" src="${basePath}/resources/images/loading_by_12jaypee34.gif"/>
			Loading imported slides, please wait...
		</div>
	</c:if>
	<div style="display: none;">
		<form action="${basePath}/${forward}" method="POST" id="forwardForm">
			<input type="hidden" name="alert" value="${alert}"/>
			<input type="hidden" name="alertdesc" value="${alertdesc}"/>
<%-- 			<input type="hidden" name="user_id" value="${user.id}"/> --%>
			<input type="hidden" name="subject_version_id" value="${subjectVersion.id}"/>
			<input type="hidden" name="activity_id" value="${activity.id}"/>
			<input type="hidden" name="group_name" value="${group.name}"/>
			<input type="hidden" name="group_type" value="${group.type}"/>
		</form>
	</div>

	<c:if test="${mode eq 'app'}">
		<div class="modal fade" id="add-group-modal" role="dialog" aria-labelledby="add-group-modalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Create work groups</h4>
					</div>
					<div class="modal-body">
						<table id="create-group-table">
							<tr>
								<td class="navbar-text">
									<input type="radio" name="add-type" value="1group"/>Create a new work group <input type="text" name="name" value="" id="new-work-group-name"/>
								</td>
							</tr>
							<tr>
								<td class="navbar-text"><input type="radio" name="add-type" value="ngroups"/>
									Create <input name="groups-number" id="groups-number-spinner" type="text"/> groups
								</td>
							</tr>
	<!-- 						<tr> -->
	<!-- 							<td class="navbar-text"><input type="radio" name="add-type" value="nevengroups"/>Create and split the class in <input name="even-groups-number" id="even-groups-number-spinner" type="text" placeholder="Number"/> even groups</td> -->
	<!-- 						</tr> -->
	<!-- 						<tr> -->
	<!-- 							<td class="navbar-text"><input type="radio" name="add-type" value="groupsofn"/>Split the class in groups of <input name="quantity-groups-number" id="quantity-groups-number-spinner" type="text" placeholder="Number"/> members</td> -->
	<!-- 						</tr> -->
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" id="create-work-group-btn" class="btn btn-primary">Accept</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<div class="modal fade" id="add-notes-group-modal" role="dialog" aria-labelledby="add-notes-group-modalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Create new notes group</h4>
					</div>
					<div class="modal-body" style="text-align: center;">
						<input type="text" name="name" value="" id="new-notes-group-name"/>
					</div>
					<div class="modal-footer">
						<button type="button" id="create-notes-group-btn" class="btn btn-primary">Accept</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<div class="modal fade" id="add-task-modal" role="dialog"
			aria-labelledby="add-group-modalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">Create Task</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tr>
								<td class="navbar-text"><textarea rows="3"
										style="width: 97%" placeholder="Task Intructions"
										id="task-description"></textarea></td>
							</tr>
							<tr>
								<td class="navbar-text"><select id="task-type">
										<option value="0">--Task Type--</option>
										<option value="1">Open Answer</option>
										<option value="2">Select One</option>
										<option value="3">Select Many</option>
								</select></td>
							</tr>
							<tr>
								<td class="navbar-text tr-type" id="tr-type-2"><a href="#"
									id="add-option-2">Add <i class="icon-plus"></i></a> <span
									style="padding-left: 11px"> <input type="radio"
										class="radio" name="so-option" /><input type="text"
										placeholder="Alternative Text" />
								</span> <span style="padding-left: 11px"> <input type="radio"
										class="radio" name="so-option" /><input type="text"
										placeholder="Alternative Text" />
								</span></td>
							</tr>
							<tr>
								<td class="navbar-text tr-type" id="tr-type-3"><a href="#"
									id="add-option-3">Add <i class="icon-plus"></i></a> <span
									style="padding-left: 11px"> <input type="checkbox"
										class="radio" /><input type="text"
										placeholder="Alternative Text" />
								</span> <span style="padding-left: 11px"> <input type="checkbox"
										class="radio" /><input type="text"
										placeholder="Alternative Text" />
								</span></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" id="create-task-btn" class="btn btn-primary">Accept</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->




		<div class="modal fade" id="show-task-modal" role="dialog"
			aria-labelledby="add-group-modalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">Task answers</h4>
						<span class="subtitle">Task answers</span>
					</div>
					<div class="modal-body">
					<table id="task-result-table">
					
					</table>
					
					</div>
				</div>
			</div>
		</div>
		
		
  
	  	<div class="modal fade" 
	  		id="import-slides-modal" 
	  		role="dialog" 
	  		aria-labelledby="import-slides-modalLabel" 
	  		aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="${basePath}/upload" 
						method="POST" 
						id="import-slides-form" 
						enctype="multipart/form-data">
						
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">Upload images</h4>
						</div>
						
						<div class="modal-body">
							<fieldset>
								<div>
									<label>Select image files to import. The images will be sorted by their name and added as slides.</label>
									<input type="file" 
										id="files" 
										name="files[]" 
										multiple="multiple"
										accept="image/jpeg,image/gif,image/png" 
										style="width: 100%;"/>
										
									<input type="hidden" name="subject_version_id" value="${subjectVersion.id}"/>
									<input type="hidden" name="activity_id" value="${activity.id}" id="activity_id_input"/>
									<input type="hidden" name="room_type" value="" id="room_type_input"/>
									<input type="hidden" name="group_type" value="" id="group_type_input"/>
									<input type="hidden" name="group_name" value="" id="group_name_input"/>
									
									<div style="text-align: center;">
										<img id="import-loading-icon" src="${basePath}/resources/images/loading_by_12jaypee34.gif"/>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary" id="create-group-btn">Upload</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	  
		
		
			
		<div id="concurrent-users-panel">
			<div style="position: relative; float: left; padding-top: 2px; padding-left: 20px;">
				<ul>  
			        <li><a id="tool_undo" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-undo"></i></a></li>
			        <li><a id="tool_redo" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-repeat"></i></a></li>
			        <li><a id="tool_copy" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-copy"></i></a></li>
			        <li><a id="tool_paste" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-paste"></i></a></li>
			        <li><a id="tool_export" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-download"></i></a></li>
			        <li><a id="tool_clear" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-trash"></i></a></li>
			   </ul>
			</div>
		
			<div style="position: relative; float: right; padding-top: 2px; padding-right: 40px;">
				<c:if test="${user.type eq 'teacher'}">
					<span id="followingBtn" class="label label-primary" style="cursor: pointer; margin-right: 20px;">Enable following</span>
				</c:if>
				<span id="requestFocusBtn" class="label label-warning" style="cursor: pointer; margin-right: 20px;">View on TV</span>
				<span>Currently editing:</span>
				<ul id="concurrent-users-list" style="max-width: 776px; max-height: 20px; overflow-y: auto;"></ul>
			</div>
<!-- 			<a href="#"><i class="icon-external-link"></i></a> -->
		</div>
	</c:if>

    <div id="editor"></div>
    
    <div id="tools" class="tools">
      <h5><span style="position: relative; right: -8px;">Tools</span></h5>
      <a id="tool_show_hide" class="show_hide_menu_btn" href="#"><i class="icon-caret-up icon_show_hide" style="top: 8px; position: relative;"></i></a>
      <i class="icon-pencil" id="icon_active_tool"></i>
      <ul>
        <li><a id="tool_select" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-hand-up"></i></a></li>
        <li><a id="tool_pen" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-pencil"></i></a></li>
        <li><a id="tool_erase" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-remove-circle"></i></a></li>
        <li><a id="tool_text" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-font"></i></a></li>
        <li><a id="tool_zoom_in" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-zoom-in"></i></a></li>
        <li><a id="tool_zoom_out" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-zoom-out"></i></a></li>
        <li><a id="tool_move" class="btn skt-tool-btn" href="#"><i class="skt-icon skt-icon-move"></i></a></li>
        <li>
          <a id="tool_color" class="btn" href="#" style="width: 26px; height: 31px;">
            <input style="display: none;" id="tool_colorpicker" value="#000000"></input>
          </a>
        </li>
<!--         <li><a id="tool_checkbox_good" class="btn" href="#"><i class="icon-ok-sign"></i></a></li> -->
<!--         <li><a id="tool_checkbox_bad" class="btn" href="#"><i class="icon-remove-sign"></i></a></li> -->
      </ul>
    </div>

    <div id="workareas-sidebar">
      <div class="dragbar left-dragbar"></div>
      <div class="dragzone dragzone-right ui-resizable-handle ui-resizable-w"></div>
      <a class="handle" href="#"></a>
      <div id="menu_accordion_left" style="overflow: visible;">
        <h3><a href="#">Personal</a></h3>
        <div>
            <div class="btn-toolbar">
              <div class="btn-group">          
                <a id="add_room_personal" 
                	class="btn btn-mini" 
                	href="#">
                	<i class="icon-plus"></i>
                </a>
                <a id="import_slides_personal" 
                	class="btn btn-mini import-slides-btn" 
                	href="#" 
                	data-type="personal" 
                	data-toggle="modal" 
                	data-target="#import-slides-modal">
                	<i class="icon-picture"></i>
                </a>
                <a id="sort_room_personal" 
                	data-listid="rooms_personal" 
                	class="btn btn-mini" 
                	href="#">
                  	<i class="icon-list-ul"></i>
                </a>
                <!--<a id="copy_room_personal" class="btn btn-mini" href="#"><i class="icon-copy"></i></a>
                <a id="paste_room_personal" class="btn btn-mini" href="#"><i class="icon-paste"></i></a>-->
              </div>
            </div>
            <div class="rooms_list" id="rooms_list_personal">
              <ul id="rooms_personal" class="rooms-ul nav nav-pills" data-side="right"></ul>
              <div class="rooms_list_handler ui-resizable-handle ui-resizable-s"></div>
            </div>
        </div>
        <h3><a id="group_name" href="#">Groupal</a></h3>
		<div>
			<div id="rooms_list_groupal" style="overflow-y: hidden; overflow-x: hidden;">
				<div id="groupal-rooms-container" style="height: 150px; overflow-y: auto; overflow-x: hidden;"></div>
				<div class="rooms_list_handler ui-resizable-handle ui-resizable-s"></div>
			</div>
		</div>
		<h3><a href="#">Screen</a></h3>
        <div>
            <div class="btn-toolbar">
              <div class="btn-group">
                <a id="add_room_screen" 
                	class="btn btn-mini" 
                	href="#">
                	<i class="icon-plus"></i>
                </a>
                <a id="import_slides_screen" 
                	class="btn btn-mini import-slides-btn" 
                	href="#" 
                	data-type="screen" 
                	data-toggle="modal" 
                	data-target="#import-slides-modal">
                	<i class="icon-picture"></i>
                </a>
                <a id="sort_room_screen" 
                	data-listid="rooms_screen" 
                	class="btn btn-mini" 
                	href="#">
                	<i class="icon-list-ul"></i>
                </a>
              </div>
            </div>    
            <div class="rooms_list" id="rooms_list_screen">
              <ul id="rooms_screen" class="rooms-ul nav nav-pills" data-side="right"></ul>
              <div class="rooms_list_handler ui-resizable-handle ui-resizable-s"></div>
            </div>
        </div>
        
        <c:if test="${user.type == 'teacher'}">
        <h3><a href="#">Tasks</a></h3>
		<div>
			<div class="btn-toolbar">
				<div class="btn-group">
					<!-- <a id="add_room_question" class="btn btn-mini" href="#">${user.type}
						<i class="icon-plus"></i>
					</a> -->
					<a id="add-task-modals" 
						class="btn btn-mini" 
						data-toggle="modal" 
						data-target="#add-task-modal" 
						href="#">
						<i class="icon-plus"></i>
					</a>
	                <a id="import_slides_tasks" 
	                	class="btn btn-mini import-slides-btn" 
	                	href="#" 
	                	data-type="task" 
	                	data-toggle="modal" 
	                	data-target="#import-slides-modal">
	                	<i class="icon-picture"></i>
	                </a>
					<a id="sort_room_question" 
						data-listid="rooms_question" 
						class="btn btn-mini" 
						href="#">
						<i class="icon-list-ul"></i>
					</a>
				</div>
			</div>
			<div class="rooms_list" id="rooms_list_question">
				<ul id="rooms_question" class="rooms-ul nav nav-pills" data-side="right"></ul>
				<div class="rooms_list_handler ui-resizable-handle ui-resizable-s"></div>
			</div>
		</div>
		</c:if>
    </div>
  </div>

	<c:if test="${mode eq 'app'}">

	    <div id="delete-zone" class="icon-dropzone">
	      <span class="icon"><i class="icon-trash"></i></span>
	    </div>
	    
	    <div id="edit-request-zone" class="icon-dropzone">
	      <span class="icon"><i class="icon-edit"></i></span>
	    </div>
	
		<div id="groups-tasks-sidebar">
			<div class="dragbar right-dragbar"></div>
			<div class="dragzone dragzone-left ui-resizable-handle ui-resizable-e"></div>
			<a id="user-list-handle" class="handle" href="#"></a>
			<div id="groups-tasks-sidebar-top">
				<div id="login-data">
					Session <span id="login-data-name">${user.name} ${user.lastname}</span> 
					<a id="icon_signout" href="#"><i class="icon-signout"></i></a>
				</div>
			</div>
			<div id="groups-tasks-sidebar-bottom">
				<div id="group-invite-alert" class="alert alert-info" style="margin: 5px 0px;">
				  <span id="alert-message"></span>
				  <div class="btn-group btn-group-sm" style="display: block; text-align: center; margin-top: 5px;">
					  <button class="btn-success btn-sm" type="button" id="accept-invitation-btn">
					    Accept
					  </button>
					  <button class="btn-primary btn-sm" type="button" id="decline-invitation-btn">
					    Dismiss
					  </button>
				  </div>
				</div>
							
			
				<div id="students">
					<ul id="students_ul" class="userlist nav nav-pills nav-stacked">
						<c:forEach var="user" items="${subjectVersionUsers}">
							<li data-name="${user.name}" data-lastname="${user.lastname}" data-id="${user.id}" class="student-li">
								<a href="#">
									${user.name} ${user.lastname}
									<span id="user-status-${user.id}" class="user-status">&#149;</span>
								</a>
							</li>
						</c:forEach>
						<c:forEach var="user" items="${tvs}">
							<li data-name="${user.name}" data-lastname="${user.lastname}" data-id="${user.id}" class="student-li">
								<a href="#">
									${user.name} ${user.lastname}
									<span class="user-status">&#2011;</span>
								</a>
							</li>
						</c:forEach>
					</ul>
				</div>
				<div id="menu_accordion_right" style="overflow: visible;">
					<h3><a href="#">Work groups <span class="ui-icon group-type-icon ui-icon-star"></span></a></h3>
					<div>
						<div class="btn-toolbar">
							<c:if test="${user.type eq 'teacher'}">
								<div class="btn-group">
									<a id="add_group" class="btn btn-mini" data-toggle="modal" data-target="#add-group-modal" href="#">
										<i class="icon-plus"></i>
									</a>
								</div>
							</c:if>
						</div>
						<div id="work-groups-accordion"></div>
					</div>
					<h3><a href="#">Notes groups <span class="ui-icon group-type-icon ui-icon-note"></span></a></h3>
					<div>
						<div class="btn-toolbar">
							<div class="btn-group">
								<a id="add_notes_group" class="btn btn-mini" data-toggle="modal" data-target="#add-notes-group-modal" href="#"><i class="icon-plus"></i></a>
							</div>
						</div>
						<div id="notes-groups-accordion"></div>
					</div>
				</div>
			</div>
		</div>
		
	</c:if>

    <canvas id="canvas" 
		style="visibility:hidden;"
		width="1024"
		height="672">
    </canvas>
    
	<!--libs-->

	<script src="${basePath}/resources/libs/jquery/jquery.js"></script>
	<script src="${basePath}/resources/libs/jquery/jquery.json-2.3.min.js"></script>
	<script src="${basePath}/resources/libs/jquery-ui/js/jquery-ui-1.9.1.custom.min.js"></script>
	<script src="${basePath}/resources/libs/jquery-ui/js/jquery.ui.touch-punch.min.js"></script>
	
	<script src="${basePath}/resources/libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="${basePath}/resources/libs/underscore/underscore.js"></script>
	
	<script src="${basePath}/resources/libs/raphael/raphael.js"></script>
	<script src="${basePath}/resources/libs/raphael/raphael.free_transform.js"></script>
	<script src="${basePath}/resources/libs/raphael/raphael.pan-zoom.js"></script>
	
	<script src="${basePath}/resources/libs/jquery-simplecolor/jquery.simple-color.js"></script>
	<script src="${basePath}/resources/libs/jquery-tabslide/jquery.tabSlideOut.v1.3.0.js"></script>
	<script src="${basePath}/resources/libs/canvg-1.3/rgbcolor.js"></script>
	<script src="${basePath}/resources/libs/canvg-1.3/StackBlur.js"></script>
	<script src="${basePath}/resources/libs/FileSaver/FileSaver.js"></script>
	<script src="${basePath}/resources/libs/canvg-1.3/canvg.js"></script>
	<script src="${basePath}/resources/libs/jquery-base64/jquery.base64.js"></script>

	<script src="${basePath}/resources/libs/objectId/objectId.js"></script>
	<script src="${basePath}/resources/libs/hammer/hammer.min.js"></script>
	<script src="${basePath}/resources/libs/raphaelUtil/textFlow.js"></script>
	<script src="${basePath}/resources/libs/raphaelUtil/smooth.js"></script>
	
	<!-- CoupledObjectServer library -->
	
	<script src="${cosServer}/resources/js/sync_blocking.js"></script>
	
	<!-- app init logic -->
		
	<script>
		L = {};
		
		Skt = {
			basePath: "${basePath}",
			user: {
				id : "${user.id}",
				name : "${user.name}",
				lastname : "${user.lastname}",
				username : "${user.username}",
				type : "${user.type}"
			},
			subjectVersion: {
				id: "${subjectVersion.id}",
				name: "${subjectVersion.name}"
			},
			activity: {
				id: "${activity.id}",
				name: "${activity.name}"
			},
			group: {
				name: "${group.name}",
				type: "${group.type}"
			},
			watchedGroups: [],
			config: {
				SERVER_URL: '${cosServer}/',
				USE_UI: <c:out value="${mode eq 'couple' ? 'false': 'true'}"/>,
				TIME_TO_READY: 0
			},
			coupling: {
				enabled: true,
				cosServer: '${cosServer}/',
				startTime: <c:out value="${mode eq 'couple' ? '0': '0'}"/>,
				activityAdapter: null,
				personalAdapter: null
			},
			handlers: {},
			ui: {},
			slides: {
				screen: [],
				personal: [],
				question: [],
				groupal: []
			},
			bullshitMonitorFlag: false
		};		
		
	</script>
	
	<!-- leaflet lib -->
	
	<script src="${basePath}/resources/libs/leaflet/Util.js"></script>
	<script src="${basePath}/resources/libs/leaflet/Class.js"></script>
	<script src="${basePath}/resources/libs/leaflet/Events.js"></script>
	
	<!-- app scripts -->
		
	<script src="${basePath}/resources/js/logicClasses/editorTools/Tool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/ToolOptions.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/NullTool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/PenTool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/SelectTool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/TextTool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/PanTool.js"></script>
	<script src="${basePath}/resources/js/logicClasses/editorTools/CheckboxTool.js"></script>
	
	<script src="${basePath}/resources/js/logicClasses/tasks/TasksManager.js"></script>
	<script src="${basePath}/resources/js/logicClasses/tasks/Task.js"></script>
	
	<script src="${basePath}/resources/js/logicClasses/History.js"></script>
	<script src="${basePath}/resources/js/logicClasses/RoomModerator.js"></script>
	<script src="${basePath}/resources/js/logicClasses/Room.js"></script>
	<script src="${basePath}/resources/js/logicClasses/RoomList.js"></script>
	<script src="${basePath}/resources/js/logicClasses/Model.js"></script>

	<script src="${basePath}/resources/js/logicClasses/sketchpadElements/Element.js"></script>
	<script src="${basePath}/resources/js/logicClasses/sketchpadElements/ElementFactory.js"></script>
	<script src="${basePath}/resources/js/logicClasses/sketchpadElements/Question.js"></script>
	<script src="${basePath}/resources/js/logicClasses/sketchpadElements/CheckboxElement.js"></script>

	<script src="${basePath}/resources/js/logicClasses/Canvas.js"></script>
	<script src="${basePath}/resources/js/logicClasses/Sketchpad.js"></script>

	<script src="${basePath}/resources/js/logicClasses/UserList.js"></script>
	<script src="${basePath}/resources/js/logicClasses/Group.js"></script>
	<script src="${basePath}/resources/js/logicClasses/GroupsManager.js"></script>
	<script src="${basePath}/resources/js/logicClasses/TVManager.js"></script>
	<script src="${basePath}/resources/js/logicClasses/TeacherMonitor.js"></script>

	<script src="${basePath}/resources/js/handlers.js"></script>
	<script src="${basePath}/resources/js/logic.js"></script>
	<script src="${basePath}/resources/js/logicClasses/tasks/TaskLogic.js"></script>
	<script src="${basePath}/resources/js/ui.js"></script>
	<script src="${basePath}/resources/js/ui.dragndrop.js"></script>
	<script src="${basePath}/resources/js/init.js"></script>
	
	<c:if test="${!(mode eq 'couple')}">
		<script>
			<c:forEach var="user" items="${subjectVersionUsers}">
				Skt.user_list.addUser(${user.id}, "${user.name}", "${user.lastname}", "${user.type}");
			</c:forEach>
			<c:forEach var="user" items="${tvs}">
				Skt.user_list.addUser(${user.id}, "${user.name}", "${user.lastname}", "${user.type}");
			</c:forEach>
		</script>
	</c:if>
	
	<c:if test="${mode eq 'couple'}">
		<script>	
			<c:forEach items="${slides}" var="slide">
				Skt.slides['${slide.type}'].push({
					id: "${slide.id}",
					type: "${slide.type}",
					svg: "${slide.svg}",
					uploadedFileId: "${slide.uploadedFile.id}",
					uploadedFileName: "${slide.uploadedFileName}"
				});
			</c:forEach>
			
			for ( var k = Skt.slides.screen.length-1; k >= 0; --k ) {
				console.log(k);
				var options = {
						roomId: Skt.slides.screen[k].id,
						svg: Skt.slides.screen[k].svg,
						type: Skt.slides.screen[k].type,
						uploadedFileId: Skt.slides.screen[k].uploadedFileId,
						uploadedFileName: Skt.slides.screen[k].uploadedFileName
				};
				Skt.model.addRoom('screen',options);
			}
			
			setTimeout(function() {
				$("#forwardForm").submit();
			}, 2000);
		</script>
	</c:if>
	
</body>
</html>
